<!doctype html>
<html lang="en" dir="ltr" xmlns:th="http://www.thymeleaf.org">
<head th:replace="public/head :: head(${session.SESSION_LOGIN_USER.blogName})"></head>
<style>
    .list-timeline-icon {
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 2rem;
        height: 2rem;
        color: #ffffff;
        text-align: center;
        background: #868c97;
        border-radius: 50%;
    }
    .list-timeline:not(.list-timeline-simple) .list-timeline-icon {
        top: 0.5rem;
        left: 6.75rem;
    }
</style>
<body class="" onload="loadHistory()">
<div class="page">
    <div class="flex-fill">
        <div th:replace="public/menu :: flexMenu(0)"></div>
        <div th:replace="public/menu :: menu(0)"></div>
        <div class="my-3 my-md-5">
            <div class="container">
                <div class="row">
                    <div class="col-sm-3">
                        <div class="card card-profile">
                            <div class="card-header"></div>
                            <div class="card-body text-center">
                                <img class="card-profile-img" th:src="${session.SESSION_LOGIN_USER.avatar}">
                                <h3 class="mb-3" th:text="${session.SESSION_LOGIN_USER.blogName}">Jane Pearson</h3>
                                <p class="mb-4" th:text="${session.SESSION_LOGIN_USER.blogIntroduce}">
                                    这个家伙很懒,什么也没有留下
                                </p>
                                <a href="#" class="btn btn-outline-secondary btn-block" th:href="@{/admin/profile/edit}">
                                    编辑资料
                                </a>
                                <hr>
                                <div class="row">
                                    <div class="lh-sm col-sm-4">
                                        <a style="font-size: 1.15em" th:text="${dashboardData.viewNum}">32</a>
                                        <div class="text-muted"><small>访问次数</small></div>
                                    </div>
                                    <div class="lh-sm col-sm-4">
                                        <a style="cursor: pointer; font-size: 1.15em" th:href="@{/admin/article/publish}" th:text="${dashboardData.articleNum}">32</a>
                                        <div class="text-muted"><small>文章</small></div>
                                    </div>
                                    <div class="lh-sm col-sm-4">
                                        <a style="cursor: pointer; font-size: 1.15em" th:href="@{/admin/column/list}" th:text="${dashboardData.columnNum}">32</a>
                                        <div class="text-muted"><small>专栏</small></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-9">
                        <div class="card ">
                            <div class="card-header">
                                贡献
                            </div>
                            <div class="card-body">
                                <div id="cal-heatmap" style="left: 7%;"></div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">动态</h3>
                            </div>
                            <div class="card-body" id="history">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <footer class="footer" th:fragment="footer">
        <div class="container">
            <div class="row align-items-center flex-row-reverse">
                <div class="col-auto ml-lg-auto">
                    <div class="row align-items-center">
                        <div class="col-auto">
                            <ul class="list-inline list-inline-dots mb-0">
                                <li class="list-inline-item"><a href="./docs/index.html">Documentation</a></li>
                                <li class="list-inline-item"><a href="./faq.html">FAQ</a></li>
                            </ul>
                        </div>
                        <div class="col-auto">
                            <a href="https://github.com/tabler/tabler" class="btn btn-outline-primary btn-sm">Source
                                code</a>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-lg-auto mt-3 mt-lg-0 text-center">
                    Copyright © 2019 <a href=".">Tabler</a>. Theme by <a href="https://codecalm.net" target="_blank">codecalm.net</a>
                    All rights reserved.
                </div>
            </div>
        </div>
    </footer>
</div>
<script type="text/javascript" th:src="@{/static/assets/js/d3.v3.min.js}"></script>
<script type="text/javascript" th:src="@{/static/assets/js/cal-heatmap.min.js}"></script>
<link rel="stylesheet" th:href="@{/static/assets/css/cal-heatmap.css}"/>
<script>
    let today = new Date();
    let startDate = new Date(today.setDate(today.getDate() - 365));
    var cal = new CalHeatMap();
    cal.init({
        start: startDate,
        data: "/admin/statistics/article",
        domain:'week', //域
        subDomain: "day",   //子yu
        minDate: startDate,
        maxDate: new Date(),
        range: 54,          //子域数量
        tooltip: true,      //显示提示栏
        subDomainTitleFormat: {
            empty: "0次提交 / {date}",
            filled: "{count}次提交 / {date}"
        },
        subDomainDateFormat: "%Y-%m-%d",
        domainLabelFormat: "",
        cellPadding: 3,
        legend: [1, 3, 5, 8, 10],
        highlight: ["now", new Date()],
        domainGutter: 0,
        cellSize: 10,
        legendHorizontalPosition: "right",
        previousSelector: "#previousSelector-a-previous",
        nextSelector: "#previousSelector-a-next"
    });

    function loadHistory() {
        var httpRequest = new XMLHttpRequest();//第一步：建立所需的对象
        httpRequest.open('GET', '/admin/log/list', true);//第二步：打开连接  将请求参数写在url中  ps:"./Ptest.php?name=test&nameone=testone"
        httpRequest.send();//第三步：发送请求  将请求参数写在URL中
        /**
         * 获取数据后的处理程序
         */
        httpRequest.onreadystatechange = function () {
            if (httpRequest.readyState == 4 && httpRequest.status == 200) {
                var data = httpRequest.responseText;//获取到json字符串，还需解析
                document.getElementById("history").innerHTML = data;
            }
        };
    }
</script>
</body>
</html>